<template>
    <van-tabbar v-model="active" class="active_tab">
            <van-tabbar-item
              v-for="(item,index) in tabbars"
              :key="index"
              @click="tab(index,item.name)"
            >

              <span :class="currIndex == index ? active:''">{{item.title}}</span>
              <template slot="icon" slot-scope="props">
                <img :src="props.active ? item.active : item.normal">
              </template>
            </van-tabbar-item>
        </van-tabbar>
  </template>
  
  <script>
  export default {
    name: "FooterStyle",
    data() {
      return {
        value:"",
        currIndex: 0,
        active: 0,
        tabbars: [
          {
            name: "homepage",
            title: "首页",
            normal: require("../common/img/home.png"),
            active: require("../common/img/home1.png")
          },
          

          {
            name: "orderfood",
            title: "点餐",
            normal: require("../common/img/orderfood.png"),
            active: require("../common/img/orderfood1.png")
          },

          {
            name: "order",
            title: "订单",
            normal: require("../common/img/order.png"),
            active: require("../common/img/order1.png")

          },
  
          {
            name: "my",
            title: "我的",
            normal: require("../common/img/my.png"),
            active: require("../common/img/my1.png")
    
          }
        ]
      };
    },
    methods: {
      tab(index, val) {
        this.currIndex = index;

        
        this.$router.push(val);
 
      }
    },
    mounted(){

      if(this.$route.path=="/homepage")
        this.active=0
      else if(this.$route.path=="/orderfood")
        this.active=1
      else if(this.$route.path=="/order")
        this.active=2
      else if(this.$route.path=="/my")
        this.active=3

    }
  };
  </script>
  
  <style>
  
  </style>